<template>
  <div class="h-full">
    <!-- <div class="_fc-t-header">
      <img class="_fc-t-logo" src="http://form-create.com/logo.png" />
      <div class="_fc-t-name">lonni-form-designer</div>
      <div class="_fc-t-menu">
        <el-button size="small" @click="setJson"> 导入JSON</el-button>
        <el-button size="small" @click="showJson">生成JSON</el-button>
        <el-button size="small" @click="showTemplate">生成组件</el-button>
        <el-button size="small" type="primary" @click="handleSubmit"
          >保存</el-button
        >
      </div>
    </div> -->
    <EDesigner ref="desiRef" @save="handleSubmit">
      <template #header-prefix>
        <img class="_fc-t-logo" src="http://form-create.com/logo.png" />
        <div class="_fc-t-name">lonni-form-designer</div>
      </template>
      <template #header-title> 表单设计器 </template>
    </EDesigner>
  </div>
</template>

<script lang="ts">
import { EDesigner } from "epic-designer";
export default defineComponent({
  components: { EDesigner },
  props: {
    title: {
      // 弹窗标题
      type: String,
      default: "",
    },
    content: {
      // 弹窗内容
      type: String,
      default: "",
    },
    confirmButtonText: {
      // 确认按钮内容
      type: [String, Boolean],
      default: "确定",
    },
  },
  emits: ["getResult"],
  setup(props, { emit }) {
    const desiRef = ref(null);
    /**
     * 设置json
     */
    const setJson = () => {};
    /**
     * 显示json
     */
    const showJson = () => {
      let data = desiRef?.value?.getData();
      return data;
    };
    /**
     * 生成组件
     */
    const showTemplate = () => {};

    /**
     * 点击保存按钮
     * @param e
     */
    const handleSubmit = (e: any) => {
      console.log(desiRef);
      let data = desiRef?.value?.getData();
      console.log(data);
      console.log(e);
      emit("getResult", e);
    };
    onMounted(() => {
      console.log("desiRef:", desiRef);
    });
    return { setJson, showJson, showTemplate, handleSubmit, desiRef };
  },
});
</script>

<style></style>
